<template>
  <div id="order_list">
    <el-form :inline="true" size="medium">
      <!-- <el-form-item>
				<el-select v-model="params.oldType" placeholder="选择新旧数据">
					<el-option
							v-for="item in oldTypeList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
					</el-option>
				</el-select>
			</el-form-item> -->
      <el-form-item>
        <el-select
          v-model="params.status"
          placeholder="状态"
          clearable
          @change="search"
        >
          <el-option
            :value="item.value"
            :label="item.label"
            v-for="(item, index) in statusList"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="params.store_id"
          placeholder="选择仓库"
          clearable
          @change="search"
        >
          <el-option
            :value="item.id"
            :label="item.name"
            v-for="(item, index) in storeList"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="订单ID" v-model="params.id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="商家ID" v-model="params.bus_id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" stripe v-loading="loading">
      <el-table-column
        align="center"
        label="订单号"
        prop="id"
      ></el-table-column>
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">待付款</span>
          <span v-if="scope.row.status == 1">任务处理中</span>
          <span v-if="scope.row.status == 2">可发货</span>
          <span v-if="scope.row.status == 3">发货中</span>
          <span v-if="scope.row.status == 4">发货完成</span>
          <span v-if="scope.row.status == 5">撤销订单</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="商家ID"
        prop="bus_id"
      ></el-table-column>
      <el-table-column label="仓库" align="center">
        <template slot-scope="scope">
          <span
            v-for="item in storeList"
            v-if="item.id == scope.row.store_id"
            >{{ item.name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" label="方式">
        <template slot-scope="scope">
          <span v-if="scope.row.import_type == 1">手动输入</span>
          <span v-if="scope.row.import_type == 2">模板导入</span>
          <span v-if="scope.row.import_type == 3">智能筛选</span>
          <span v-if="scope.row.import_type == 4">拼多多一键下单</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="平台类型">
        <template slot-scope="scope">
          <span v-if="scope.row.belong_terrace == 1">其他</span>
          <span v-if="scope.row.belong_terrace == 2">淘宝/天猫</span>
          <span v-if="scope.row.belong_terrace == 3">京东</span>
          <span v-if="scope.row.belong_terrace == 4">拼多多</span>
          <span v-if="scope.row.belong_terrace == 5">抖音</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="包裹数"
        prop="pk_count"
      ></el-table-column>
      <el-table-column
        align="center"
        label="总费用"
        prop="amount"
      ></el-table-column>
      <el-table-column align="center" label="支付时间">
        <template slot-scope="scope">
          {{ $common.getDate(scope.row.pay_time) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          {{ $common.getDate(scope.row.create_time) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="getNewList"
      :current-page.sync="params.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        status: "",
        belongTerrace: "",
        busId: "",
        isCount: true,
        id: "",
        startTime: "",
        endTime: "",
        storeId: "",
        pageNo: 1,
        pageSize: 10,
        oldType: 1,
        tenantid: sessionStorage.getItem("tenantid"),
      },
      total: 100,
      statusList: [
        {
          value: 0,
          label: "待付款",
        },
        {
          value: 1,
          label: "任务处理中",
        },
        {
          value: 2,
          label: "可发货",
        },
        {
          value: 3,
          label: "发货中",
        },
        {
          value: 4,
          label: "发货完成",
        },
        {
          value: -1,
          label: "撤销订单",
        },
      ],
      oldTypeList: [
        { value: 1, label: "新数据" },
        { value: 2, label: "旧数据" },
      ],
      belongTerraceList: [
        {
          label: "其他",
          value: 1,
        },
        {
          label: "淘宝/天猫",
          value: 2,
        },
        {
          label: "京东",
          value: 3,
        },
        {
          label: "拼多多",
          value: 4,
        },
        {
          label: "抖音",
          value: 5,
        },
      ],
      timeArr: [],
      list: [],
      storeList: [],
      loading: false,
    };
  },

  watch: {},

  created() {
    //this.getList()
    this.getNewList();
    this.getCount();
    this.getAllStoreList();
  },

  mounted() {
    this.getAllStoreList();
  },

  methods: {
    getAllStoreList() {
      this.$request.post({
        url: "/ReportApi/tenant/storetlist",
        success: (res) => {
          this.storeList = res;
        },
      });
    },
    handleSizeChange(e) {
      this.params.pageSize = e;
      this.params.isCount = true;
      //this.getList()
      this.getNewList();
    },
    search() {
      this.params.pageNo = 1;
      this.params.isCount = true;
      //this.getList()
      this.getNewList();
      this.getCount();
    },
    timeChange(val) {
      if (val) {
        this.params.startTime = this.$common.getDate(val[0]);
        this.params.endTime = this.$common.getDate(val[1]);
      } else {
        this.params.startTime = "";
        this.params.endTime = "";
      }
    },
    // getList(){
    // 	this.loading = true
    // 	this.$request.post({
    // 		url:'/tenant/orderInfo/list',
    // 		params: this.params,
    // 		success: res => {
    // 			this.list = res.list
    // 			if (this.params.isCount) {
    // 				this.params.isCount = false
    // 				this.total = res.total
    // 			}
    // 		},
    // 		finally: res => {
    // 			this.loading = false
    // 		}
    // 	})
    // },
    getNewList() {
      this.loading = true;
      this.$request.post({
        url: "/ReportApi/tenant/orderlist",
        params: this.params,
        success: (result) => {
          this.list = result[0];
          this.total = result[1];
        },
        finally: () => {
          this.loading = false;
        },
      });
    },
    // getCount() {
    // 	this.$request.post({
    // 		url: '/tenant/orderInfo/count',
    // 		params: this.params,
    // 		success: result =>{
    // 			this.total = result
    // 		},
    // 		finally: ()=>{
    // 		}
    // 	})
    // }
  },

  beforeDestroy() {},
};
</script>

<style>
</style>

<style lang="scss" scoped>
#order_list {
  .el-pagination {
    text-align: right;
    padding-top: 20px;
  }
}
</style>
